<template>
  <el-container>
    <el-row>
      <el-col :span="24" class="headercontainer">
        <el-menu
          class="el-menu-demo"
          mode="horizontal"
          active-text-color="#ffd04b"
          router
        >
          <el-menu-item index="/main/staffinfo">员工信息</el-menu-item>
          <el-menu-item index="/main/shopinfo">门店信息</el-menu-item>
          <el-menu-item index="/main/stafflogin">员工登录日志</el-menu-item>
          <el-menu-item index="/main/position">职位管理</el-menu-item>
          <!-- <el-menu-item index="/main/jurisdiction">权限管理</el-menu-item> -->
        </el-menu>
      </el-col>
    </el-row>
    <el-header>
      <div id="search">
        <div class="search-container">
          <!-- <div class="search-title">查询</div> -->
          <el-form :inline="true" :model="formInline" class="form-search">
            <el-form-item label="搜索：" class="search-item">
              <el-input
                v-model="formInline.search"
                placeholder="可根据职位进行搜索"
              ></el-input>
            </el-form-item>
            <el-form-item class="search-item">
              <el-button type="success" icon="el-icon-search" @click="Search"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-header>
    <el-main class="tablem">
      <div class="border">
        <div class="tablepad">
          <span style="margin-right: auto">职位管理</span>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-circle-plus-outline"
            @click="addposition"
            >添加</el-button
          >
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="delallposition"
            >批量删除</el-button
          >
        </div>
        <div class="tablepad">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            class="fontsize"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="id" label="职位编号" width="100">
            </el-table-column>
            <el-table-column prop="roleName" label="职位名称" width="100">
            </el-table-column>
            <el-table-column prop="permission_name" label="拥有权限" empty-text=''></el-table-column>
            <el-table-column prop="description" label="描述"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="obj">
                <el-button
                  type="warning"
                  icon="el-icon-edit"
                  plain
                  size="mini"
                  @click="mdfjbtn(obj.row.id)"
                  >修改</el-button
                >
                <el-button
                  type="success"
                  icon="el-icon-edit"
                  plain
                  size="mini"
                  @click="modifibtn(obj.row.id)"
                  >授权</el-button
                >
                <el-button
                  type="danger"
                  size="mini"
                  plain
                  icon="el-icon-delete"
                  @click="deletebtn(obj.row.id)"
                  >删除</el-button
                ></template
              ></el-table-column
            >
          </el-table>
        </div>
        <div class="page">
          <Page @shareData="shareData" :totalCount="count"></Page>
        </div>
      </div>
    </el-main>
    <el-dialog title="添加角色" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item
          label="角色名称"
          :label-width="formLabelWidth"
          prop="roleName"
        >
          <el-input
            v-model="form.roleName"
            autocomplete="off"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="角色描述"
          :label-width="formLabelWidth"
          prop="description"
        >
          <el-input
            type="string"
            v-model="form.description"
            autocomplete="off"
            style="width: 300px"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer center">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改角色" :visible.sync="modifi">
      <el-form :model="modifiform" :rules="rules" ref="modifiform">
        <el-form-item
          label="角色名称"
          :label-width="formLabelWidth"
          prop="roleName"
        >
          <el-input
            v-model="modifiform.roleName"
            autocomplete="off"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="角色描述"
          :label-width="formLabelWidth"
          prop="description"
        >
          <el-input
            type="string"
            v-model="modifiform.description"
            autocomplete="off"
            style="width: 300px"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer center">
        <el-button @click="modifi = false">取 消</el-button>
        <el-button type="primary" @click="modificonform">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import Page from "../../components/common/Pagination.vue";
export default {
  data() {
    return {
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
        ],
        description: [
          { required: true, message: "请输入角色描述", trigger: "blur" },
        ],
      },
      dialogFormVisible: false,
      modifi: false,
      tableData: [],
      formInline: {
        search: "", //要搜索的内容
      },
      multipleSelection: [],
      // 条数
      pageCount: 5,
      // 页数
      nowPage: 1,
      count: 0,
      totalCount: "",
      ids: [],
      form: {},
      modifiform: {},
      jarr:[],
      formLabelWidth: "120px",
    };
  },
  components: {
    Page,
  },
  methods: {
    modificonform() {
      this.modifi = false;
      console.log(this.modifiform);
      this.axios({
        method:'post',
        url:'/role/update',
        data:this.modifiform
      })
      .then((res)=>{
        console.log(res);
        this.getall()
      })
    },
    addposition() {
      this.dialogFormVisible = true;
      this.axios({
        method: "post",
        url: "/permission/list",
        data: {
          limit: 100,
          page: 1,
          startIndex: 0,
        },
      }).then((res) => {
        // console.log(res.data.data.level2.slice(24));
        res.data.data.level2.slice(24).forEach((item, i) => {
        // console.log(item.id);
        this.jarr.push(item.id)
        // console.log(this.jarr.toString());
        this.form.permissionIds=this.jarr.toString()
        // console.log(this.form);
      });

      });
    },
    confirm() {
      console.log(this.form);
      this.axios({
        method: "post",
        url: "/role/add",
        data: this.form,
      }).then((res) => {
        console.log(res);
        this.dialogFormVisible = false;
      });
    },
    shareData(v) {
      console.log(v);
      this.pageCount = v.pageCount;
      this.nowPage = v.nowPage;
      this.getall();
    },
    modifibtn(v) {
      localStorage.setItem("id", v);
      this.$router.push("/main/jurisdiction/");
    },
    mdfjbtn(v) {
      this.modifi = true;
      console.log(v);
      this.axios({
        method: "get",
        url: "/role/" + v,
      }).then((res) => {
        console.log(res.data.data);
        this.modifiform = res.data.data;
      });
    },
    handleSelectionChange(val) {
      this.ids = [];
      this.multipleSelection = val;
      for (let i = 0; i < this.multipleSelection.length; i++) {
        this.ids.push(this.multipleSelection[i].id);
      }
      console.log(this.ids);
    },
    deletebtn(v) {
      this.$confirm("此操作将删除该职位, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.axios({
            method: "get",
            url: "/role/delete/" + v,
          }).then((res) => {
            console.log(res);
            this.getall();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    Search() {
      console.log(this.formInline.search);
      this.axios({
        method: "post",
        url: "/role/list",
        data: {
          limit: this.pageCount,
          page: this.nowPage,
          roleName: this.formInline.search,
          startIndex: 0,
        },
      }).then((res) => {
        console.log(res);
        this.count = res.data.data.length;
        this.tableData=res.data.data
      });
    },
    delallposition() {
      // console.log("删除所有");
      this.$confirm("此操作将删除所有选中职位, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.axios({
            method: "post",
            url: "/role/deleteByIds",
            data: {
              ids: this.ids,
            },
          }).then((res) => {
            console.log(res);
            this.getall();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    getall() {
      this.axios({
        method: "post",
        url: "/role/list",
        data: {
          limit: this.pageCount,
          page: this.nowPage,
          roleName: this.formInline.search,
          startIndex: 0,
        },
      }).then((res) => {
        // console.log(res.data);
        this.count = res.data.count;
        this.tableData = [];
        for (let i = 0; i < res.data.data.length; i++) {
          this.tableData.push(res.data.data[i]);
        }
        console.log(this.tableData);
        //  this.tableData.permission_name=this.tableData.permission_name.slite('')
        for(let i=0;i<this.tableData.length;i++){
          this.tableData[i].permission_name=this.tableData[i].permission_name.replace(/,/g, " ")
          console.log(this.tableData[i].permission_name);
        }
        //  console.log(this.tableData[0]);
      });
    },
  },
  created() {
    this.getall();
  },
};
</script>

<style lang='less' scoped>
.fontsize {
  font-size: 1.4rem;
  font-weight: normal;
}
.search-container {
  background-color: #fff;
  border: 0.1rem solid #dbe0e9;
  .search-title {
    height: 4rem;
    background-color: #f2f2f2;
    box-sizing: border-box;
    border-bottom: 0.1rem solid #dbe0e9;
    line-height: 4rem;
    font-size: 1.4rem;
    padding-left: 3rem;
    font-weight: 500;
    color: #666666;
  }
  .form-search {
    margin: 1rem;
    padding: 1.5rem;
    background-color: #f5f9fc;
    box-sizing: border-box;
    .search-item {
      margin-bottom: 0;
    }
  }
}
.container {
  border: 1px solid black;
}
.headercontainer {
  padding: 20px;
}
.tablem {
  margin-top: 35px;
}
.border {
  padding: 10px;
  border: rgb(207, 205, 205) solid 1px;
  background-color: white;
}
.tablepad {
  font-size: 1.4rem;
  margin: 5px;
  padding: 5px;
  background-color: #f5f9fc;
  display: flex;
  justify-content: flex-end;
}
.page {
  font-size: 1.4rem;
  margin: 5px;
  padding: 5px;
  background-color: #f5f9fc;
}
</style>